<template>
  <div class="page-course-home">
    <br />
    <Header :cityList="cityList"></Header>
    <br />

    <Row
      index=""
      v-for="(item, index) in weekCourses"
      :key="index"
      type="flex"
      justify="space-between"
      align="middle"
    >
      <Col
        span="2"
        align="center"
        v-for="el in item.data"
        :key="el.id"
        style="width:110px"
      >
        <Button
          style="height: 70px;margin-top:16px;width:130px"
          @click="viewInfo"
        >
          {{ el.time }}（{{ el.minutes }}分钟）<br />
          {{ el.classroom }} <br />
          {{ el.teacherNum > 1 ? `${el.teacherNum}位老师` : el.teacherName }}
        </Button>
      </Col>
    </Row>

    <Row>
      <Col span="12">
        <div style="margin: 30px 10px;margin-bottom:120px;">
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span style="font-size: 16px">剩余课时数量：123节</span>
        </div>
      </Col>
    </Row>

    <Dialog ref="dialog" />
  </div>
</template>

<script>
import Header from './header'
import Dialog from '../dialog/index'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        }
      ],
      model1: ''
    }
  },
  computed: mapState({
    weekCourses: store => store.course.weekCourses
  }),
  mounted () {
    this.$store.dispatch('getWeekCourses')
  },
  methods: {
    viewInfo () {
      this.$refs.dialog.open()
    },
    close () {
      console.log('close')
      this.$emit('closeClass')
    }
  },
  components: { Header, Dialog }
}
</script>

<style lang="less" scoped>
.page-course-home {
  width: 80%;
  margin-left: 50px;
}
</style>
